<div class="container" rtl>

  <div class="row">
    <div class="col-12">
      <h1 class="main-heading">{{ 'anms.examples.notifications.title' | translate }}</h1>
    </div>
  </div>
  
  <div class="row item" [ngClass]="routeAnimationsElements">
    <button mat-raised-button class="col-3 default" (click)="default()">
      {{ 'anms.examples.notifications.default.title' | translate }}
    </button>
    <p class="col-9">{{ 'anms.examples.notifications.default.description' | translate }}</p>
  </div>

  <div class="row item" [ngClass]="routeAnimationsElements">
    <button mat-raised-button class="col-3 information" (click)="info()">
      {{ 'anms.examples.notifications.info.title' | translate }}
    </button>
    <p class="col-9">{{ 'anms.examples.notifications.info.description' | translate }}</p>
  </div>

  <div class="row item" [ngClass]="routeAnimationsElements">
    <button mat-raised-button class="col-3 success" (click)="success()">
      {{ 'anms.examples.notifications.success.title' | translate }}
    </button>
    <p class="col-9">{{ 'anms.examples.notifications.success.description' | translate }}</p>
  </div>

  <div class="row item" [ngClass]="routeAnimationsElements">
    <button mat-raised-button class="col-3 warning" (click)="warn()">
      {{ 'anms.examples.notifications.warning.title' | translate }}
    </button>
    <p class="col-9">{{ 'anms.examples.notifications.warning.description' | translate }}</p>
  </div>

  <div class="row item" [ngClass]="routeAnimationsElements" >
    <button mat-raised-button class="col-3 error" (click)="error()">
      {{ 'anms.examples.notifications.error.title' | translate }}
    </button>
    <p class="col-9">{{ 'anms.examples.notifications.error.description' | translate }}</p>
  </div>

</div>
